<template>
  <el-row id="platform-info-container">
    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">端设备注册</el-menu-item>
        <el-menu-item index="2">平台版本校验</el-menu-item>
        <el-menu-item index="3">平台字典数据</el-menu-item>
      </el-menu>

    </el-row>

    <el-row class="pic-register-body" v-show="registerShow">
      <el-row v-if="!permission.one.isViewShow" class="permission">
        没有权限!
      </el-row>
      <el-row v-else class="pic-registe-form">
        <el-form  label-width="140px" :model="registerForm" ref="registerForm" :rules="registerRules">
          <el-form-item label="统一社会信用代码:" prop="socialCreditCode">
            <el-input :disabled="registForbidden" v-model="registerForm.socialCreditCode"></el-input>
          </el-form-item>

          <el-form-item label="行政区划代码:" prop="administrativeCode">
            <el-input :disabled="registForbidden" v-model="registerForm.administrativeCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="registForbidden" @click="handleRegist('registerForm')" type="primary" :loading="false">注册</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-row>

    <el-row class="pic-version-body" v-show="versionShow">
      <el-row v-if="!permission.two.isViewShow" class="permission">
        没有权限!
      </el-row>
      <el-row v-else class="pic-version-form">
        <el-form  label-width="160px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="设备注册服务版本:">
                <el-input :disabled="forbidden" v-model="versionForm.deviceRegistrationServiceVersion"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="平台注册服务版本:">
                <el-input :disabled="forbidden" v-model="versionForm.platformRegistrationServiceVersion"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button  @click="handleRelongin" type="primary" :loading="false">重新注册</el-button>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="设备基础数据版本:">
                <el-input :disabled="forbidden" v-model="versionForm.deviceBaseDataVersion"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="平台基础数据版本:">
                <el-input :disabled="forbidden" v-model="versionForm.platformBaseDataVersion"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button @click="updateVersion" type="primary" :loading="false">更新</el-button>
            </el-col>
          </el-row>


        </el-form>
      </el-row>
    </el-row>

    <el-row class="pic-information-body" v-show="informationShow">
      <el-row v-if="!permission.three.isViewShow" class="permission">
        没有权限!
      </el-row>
      <el-card v-else class="box-card">
        <div slot="header" class="clearfix">
          <span>基础数据</span>
        </div>

        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="行政区划" name="1">
            <el-table
              :data="tableData1"
              stripe
              maxHeight="260"
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey1">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="行业" name="2">
            <el-table
              :data="tableData2"
              stripe
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey2">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="单位类别编码" name="3">
            <el-table
              :data="tableData3"
              maxHeight="260"
              stripe
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey3">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="采集系统分类" name="4">
            <el-table
              :data="tableData4"
              maxHeight="260"
              stripe
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey4">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="生产工序" name="5">
            <el-table
              :data="tableData5"
              maxHeight="260"
              stripe
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey5">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="采集数据项" name="6">
            <el-table
              :data="tableData6"
              stripe
              maxHeight="260"
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey6">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="采集数据项数据用途" name="7">
            <el-table
              :data="tableData7"
              maxHeight="260"
              stripe
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey7">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="能源类型" name="8">
            <el-table
              :data="tableData8"
              stripe
              maxHeight="260"
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey8">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="产品指标" name="9">
            <el-table
              :data="tableData9"
              stripe
              maxHeight="260"
              style="width: 100%">
              <template v-for="(item,index) in tableDataKey9">
                <el-table-column
                  :prop="item"
                  :label="item">
                </el-table-column>
              </template>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </el-row>



  </el-row>

</template>

<script>
   import { mapGetters } from 'vuex'
    export default {
        name: "index",
        data(){
          return {
            permission:{
              one:{
                isViewShow: false,
                isViewEdit: false,
              },
              two:{
                isViewShow: false,
                isViewEdit: false,
              },
              three:{
                isViewShow: false,
                isViewEdit: false,
              }
            },
            activeIndex: '1',
            activeName: '1',
            platformkey: '',
            isRegister: '',
            registerShow: true,
            versionShow: false,
            informationShow: false,
            forbidden:true,
            registForbidden: false,
            tableData1:[],
            tableDataKey1:[],
            tableData2:[],
            tableDataKey2:[],
            tableData3:[],
            tableDataKey3:[],
            tableData4:[],
            tableDataKey4:[],
            tableData5:[],
            tableDataKey5:[],
            tableData6:[],
            tableDataKey6:[],
            tableData7:[],
            tableDataKey7:[],
            tableData8:[],
            tableDataKey8:[],
            tableData9:[],
            tableDataKey9:[],
            versionForm:{
              deviceRegistrationServiceVersion: "",
              deviceBaseDataVersion: "",
              platformBaseDataVersion: "",
              platformRegistrationServiceVersion: "",
              deviceId: ""
            },
            registerForm:{
              socialCreditCode: '',
              administrativeCode:''
            },
            registerRules:{
              socialCreditCode:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
              administrativeCode:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
            }
          }
        },
      created() {
        this.$emit('fixHeadIndex', "3")
      },
      computed: {
        ...mapGetters(['user/platForm'])
      },
      mounted(){
        let _that = this
        let obj = this.validateGlobal.getPermission(4)
        this.permission.one.isViewShow = obj.isViewShow
        this.permission.one.isViewEdit = obj.isViewEdit
          this.askRegistBase()
          this.askPlatformBase()
          this.askPlatformVersion()
      },
        methods:{
          handleSelect(key, keyPath){
            this.activeIndex = key
            switch (key) {
              case "1":{
                 this.registerShow = true
                 this.versionShow = false
                 this.informationShow = false

                let obj = this.validateGlobal.getPermission(4)
                this.permission.one.isViewShow = obj.isViewShow
                this.permission.one.isViewEdit = obj.isViewEdit
                break
              }
              case "2":{
                this.registerShow = false
                this.versionShow = true
                this.informationShow = false

                let obj = this.validateGlobal.getPermission(5)
                this.permission.two.isViewShow = obj.isViewShow
                this.permission.two.isViewEdit = obj.isViewEdit
                break
              }
              case "3":{
                this.registerShow = false
                this.versionShow = false
                this.informationShow = true

                let obj = this.validateGlobal.getPermission(6)
                this.permission.three.isViewShow = obj.isViewShow
                this.permission.three.isViewEdit = obj.isViewEdit
                break
              }
            }
          },
          handleRegist(formName){
            let _that = this
            this.$refs[formName].validate((valid) => {
              if (valid) {
                _that.postRegist()
              } else {
                _that.$message('输入有误!');
                return false;
              }
            });
          },
          handleRelongin(){
            this.handleSelect('1')
            this.registForbidden = false
          },
          postRegist(){
            let _that = this
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.platformManage.regist+ '?userId=' + userId
            let askData = {
              administrativeCode: _that.registerForm.administrativeCode,
              socialCreditCode: _that.registerForm.socialCreditCode,
              platformType:  _that.$store.getters.platform
            }
            this.http.post(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.$message('注册成功!');
                _that.askRegistBase()

              }else{
                _that.$message('注册失败!');
              }
            })
          },
          askPlatformBase(){
            let _that = this
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.platformManage.base
            let askData = {
              userId: userId,
              platformType:  _that.$store.getters.platform
            }
            this.http.get(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.tableDataKey1 = Object.keys(res.data.regions[0])
                _that.tableData1 = res.data.regions
                _that.tableDataKey2 = Object.keys(res.data.industries[0])
                _that.tableData2 = res.data.industries
                _that.tableDataKey3 = Object.keys(res.data.entTypes[0])
                _that.tableData3 = res.data.entTypes
                _that.tableDataKey4 = Object.keys(res.data.collectSystemTypes[0])
                _that.tableData4 = res.data.collectSystemTypes
                _that.tableDataKey5 = Object.keys(res.data.productProcesses[0])
                _that.tableData5 = res.data.productProcesses
                _that.tableDataKey6 = Object.keys(res.data.collectItems[0])
                _that.tableData6 = res.data.collectItems
                _that.tableDataKey7 = Object.keys(res.data.collectItemUsages[0])
                _that.tableData7 = res.data.collectItemUsages
                _that.tableDataKey8 = Object.keys(res.data.energyTypes[0])
                _that.tableData8 = res.data.energyTypes
                _that.tableDataKey9 = Object.keys(res.data.productQuotas[0])
                _that.tableData9 = res.data.productQuotas
              }else{
                _that.$message('数据获取失败!');
              }
            })
          },
          askRegistBase(){
            let _that = this
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.platformManage.registQuery
            let askData = {
              userId: userId,
              platformType:  _that.$store.getters.platform
            }
            this.http.get(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                let {administrativeCode,socialCreditCode,isRegister} = res.data
                _that.isRegister = isRegister
                if (isRegister === 1) {
                   _that.registForbidden = true
                   _that.registerForm.socialCreditCode = socialCreditCode
                   _that.registerForm.administrativeCode = administrativeCode
                }else{
                  _that.registForbidden = false
                }
              }else{
                _that.$message('数据获取失败!');
              }
            })
          },
          askPlatformVersion(){
            let _that = this
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.platformManage.version
            let askData = {
              userId: userId,
              platformType:  _that.$store.getters.platform
            }
            this.http.get(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.versionForm = res.data
              }else{
                _that.$message('数据获取失败!');
              }
            })
          },
          updateVersion(){
            let _that = this
            let userId = sessionStorage.getItem("userId")
            let url = _that.ports.platformManage.updateVersion
            let askData = {
              userId: userId,
              deviceId: _that.versionForm.deviceId,
              platformType:  _that.$store.getters.platform
            }
            this.http.get(url,askData, res => {
              if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
                _that.$message('版本更新成功!');
                _that.versionForm = res.data
              }else{
                _that.$message('数据获取失败!');
              }
            })
          },
        }

    }
</script>

<style lang="scss">
  #platform-info-container{

    .tittle-nav{
      height: 50px;
      background-color: #17252f;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-menu {
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      margin-left: 8px;
    }

    .el-menu--horizontal > .el-menu-item {
      height: 50px!important;
      line-height: 50px!important;
      margin: 0;
      border-bottom: 0px solid transparent;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: solid 0px #e6e6e6;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: 0px solid #303133;
      color: #303133;
    }

    .pic-register-body{
      margin-top: 200px;
      display: flex;
      justify-content: center;
    }

    .pic-registe-form{
      width: 500px;
      height: 300px;

      .el-button{
        margin-left: 140px;
      }
    }

    .el-form-item__label {
      color: white;
    }

    .pic-version-body{
      margin-top: 200px;
      display: flex;
      justify-content: center;
    }

    .pic-version-form{
      width: 800px;
      height: 300px;

      .el-button{
        margin-left: 20px;
      }
    }

    .pic-information-body{

      .el-card{
        margin: 20px 20px 0 20px;
        height: 770px;
      }

      .el-card__body{
        overflow:auto;
      }
    }

    .el-select{
      width: 360px;
    }


  }
</style>
